<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header-card">
      <view class="header">
        <view class="location">
          <uni-icons type="location" size="20"></uni-icons>
          <text>江西</text>
        </view>
        <view class="user-info">
          <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
          <view class="info">
            <text class="title">你好，智慧农业基地</text>
            <text class="date">{{ currentDate }}</text>
          </view>
          <view class="notification">
            <image class="notification-icon" src="/static/images/AI.png" @click="navigateToAIPage"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 轮播图区域 -->
    <view class="section-card">
      <view class="card-header">
        <text>农业新闻</text>
      
      </view>
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(slide, index) in slides" :key="index" @click="goToNewsDetail(slide.id)">
          <view class="swiper-item">
            <image :src="slide.image" mode="aspectFill"></image>
            <text class="swiper-title">{{ slide.title }}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 摄像头区域 -->
    <view class="section-card">
      <view class="card-header">
        <text>通用摄像头</text>
      </view>
      <view class="main-camera" @click="navigateToMonitor">
        <image src="/static/greenhouse.jpg" mode="aspectFill"></image>
      </view>
      <scroll-view class="camera-list" scroll-x>
        <view class="camera-items">
          <view v-for="(item, index) in cameraList" :key="index" class="camera-item" @click="navigateToMonitor">
            <image :src="item.image" mode="aspectFill"></image>
            <view class="play-icon">
              <uni-icons type="videocam" size="24" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 设备状态 -->
    <view class="section-card">
      <view class="card-header">
        <text>设备状态</text>
        <text class="more" @click="navigateToEquipment">设备详情</text>
      </view>
      <view class="status-circle">
        <view class="circle-wrapper">
          <view class="echart" id="ring-chart"></view>
        </view>
        <view class="status-info">
          <view class="total">
            <text class="num">{{ totalDevices }}</text>
            <text>设备总数(台)</text>
          </view>
          <uni-row class="status-grid" :gutter="20">
            <uni-col :span="8">
              <view class="status-item">
                <text class="num green">{{ deviceStatus.online }}</text>
                <text>在线</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="status-item">
                <text class="num yellow">{{ deviceStatus.offline }}</text>
                <text>离线</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="status-item">
                <text class="num red">{{ deviceStatus.alarm }}</text>
                <text>报警</text>
              </view>
            </uni-col>
          </uni-row>
        </view>
      </view>
      <uni-section class="device-types">
        <uni-row :gutter="20">
          <uni-col :span="8">
            <view class="type-item">
              <text class="num">4</text>
              <text>传感器</text>
              <view class="icon-wrapper sensor">
                <uni-icons type="settings-filled" size="24" color="#2979ff"></uni-icons>
              </view>
            </view>
          </uni-col>
          <uni-col :span="8">
            <view class="type-item">
              <text class="num">4</text>
              <text>控制器</text>
              <view class="icon-wrapper controller">
                <uni-icons type="gear-filled" size="24" color="#07c160"></uni-icons>
              </view>
            </view>
          </uni-col>
          <uni-col :span="8">
            <view class="type-item">
              <text class="num">1</text>
              <text>摄像头</text>
              <view class="icon-wrapper camera">
                <uni-icons type="camera-filled" size="24" color="#ff976a"></uni-icons>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </uni-section>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import { getNewsList } from '@/api/news'

export default {
  data() {
    const deviceStatus = {
      online: 9,
      offline: 0,
      alarm: 0
    }

    return {
      userInfo: {
        avatar: '/static/logo.png'
      },
      currentDate: '',
      deviceStatus,
      chart: null,
      cameraList: [
        { image: '/static/greenhouse.jpg' },
        { image: '/static/greenhouse.jpg' },
        { image: '/static/greenhouse.jpg' },
        { image: '/static/greenhouse.jpg' }
      ],
      slides: []
    }
  },
  computed: {
    totalDevices() {
      const { online, offline, alarm } = this.deviceStatus
      return online + offline + alarm
    }
  },
  mounted() {
    this.currentDate = this.formatDate(new Date())
    this.initChart()
    this.getNews()
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
      return `${year}年${month}月${day}日 星期${weekDay}`
    },
    goToNewsDetail(id) {
      const slide = this.slides.find(item => item.id === id)
      if (slide && slide.source) {
        // #ifdef H5
        window.open(slide.source)
        // #endif
        // #ifdef APP-PLUS
        plus.runtime.openURL(slide.source)
        // #endif
      }
    },
    initChart() {
      // 初始化图表
      const chartDom = document.getElementById('ring-chart')
      this.chart = echarts.init(chartDom)
      this.updateChart()
    },
    updateChart() {
      // 更新图表配置
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.deviceStatus.online,
                name: '在线',
                itemStyle: { color: '#07c160' }
              },
              {
                value: this.deviceStatus.offline,
                name: '离线',
                itemStyle: { color: '#ff976a' }
              },
              {
                value: this.deviceStatus.alarm,
                name: '报警',
                itemStyle: { color: '#ee0a24' }
              }
            ]
          }
        ]
      }
      this.chart && this.chart.setOption(option)
    },
    navigateToAIPage() {
      uni.navigateTo({
        url: '/pages/AI/index'
      })
    },
    navigateToEquipment() {
      uni.navigateTo({
        url: '/pages/equipment/index'
      })
    },
    navigateToMonitor() {
      uni.switchTab({
        url: '/pages/monitor/index'
      })
    },
    async getNews() {
      try {
        const res = await getNewsList()
        if (res.code === 200 && res.data) {
          this.slides = res.data.map(item => ({
            id: item.id,
            title: item.title,
            image: item.imageUrl,
            source: item.source
          }))
        }
      } catch (error) {
        console.error('获取新闻列表失败:', error)
      }
    }
  },
  watch: {
    deviceStatus: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.updateChart()
        })
      }
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header-card,
.section-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header {
  .location {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    color: #666;
  }

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .info {
      flex: 1;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      .date {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .notification {
    .notification-icon {
      width: 48rpx;
      height: 48rpx;
      cursor: pointer;
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .more {
    color: #2979ff;
    font-size: 24rpx;
  }
}

.swiper {
  height: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.swiper-item image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.swiper-title {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  text-align: center;
}

.main-camera {
  margin-bottom: 20rpx;

  image {
    width: 100%;
    height: 300rpx;
    border-radius: 12rpx;
  }
}

.camera-list {
  .camera-items {
    display: flex;
    padding: 10rpx 0;
  }

  .camera-item {
    position: relative;
    margin-right: 20rpx;

    image {
      width: 200rpx;
      height: 150rpx;
      border-radius: 8rpx;
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      padding: 10rpx;
    }
  }
}

.status-circle {
  display: flex;
  margin-bottom: 30rpx;

  .circle-wrapper {
    width: 300rpx;
    height: 300rpx;
    flex-shrink: 0;

    .echart {
      width: 100%;
      height: 100%;
    }
  }

  .status-info {
    flex: 1;
    padding-left: 30rpx;

    .total {
      text-align: center;
      margin-bottom: 30rpx;

      .num {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
  }
}

.status-item {
  text-align: center;

  .num {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
  }
}

.device-types {
  margin-top: 20rpx;

  .type-item {
    position: relative;
    text-align: center;
    padding: 30rpx 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    overflow: hidden;

    .num {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      position: relative;
      z-index: 1;
    }

    text {
      position: relative;
      z-index: 1;
    }

    .icon-wrapper {
      position: absolute;
      right: -10rpx;
      bottom: -10rpx;
      opacity: 0.2;
      transform: rotate(-15deg);

      &.sensor {
        color: #2979ff;
      }

      &.controller {
        color: #07c160;
      }

      &.camera {
        color: #ff976a;
      }
    }
  }
}

.num {
  &.green { color: #07c160; }
  &.yellow { color: #ff976a; }
  &.red { color: #ee0a24; }
}
</style>
